<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
 <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> 
<c:set var="ctx" value="${pageContext.request.contextPath}" />

<!doctype html >
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
<title>推广记录</title>
<link media="all" href="${ctx}/css/box.css" rel="stylesheet">
<link href="${ctx}/css/common.css" rel="stylesheet">
<script type="text/javascript" src="${ctx}/js/jquery.min.js"></script>
<script src="${ctx}/js/iscroll.js"></script>
<script src="${ctx}/js/brokerageList.js"></script>
<script src="${ctx}/js/handlebars-v2.0.0.js"></script>
<script>
var path = '${ctx}';
</script>
<script id="brokerageDtl" type="text/x-handlebars-template">
   {{#each this}}
            <li>
                <div class="extend-img">
                    <div class="{{product.operSimpleName}}"></div> 
                </div>
                <div class="extend-word">
                    <div>
                        <p>{{product.productName}}</p>
                        <p>{{dCharge}}</p>
                    </div>
                    <div>
                        <p>{{crtDate}}</p>
                        
                    </div>
                 </div>
            </li> 
   {{/each}}
</script>
<style>
@media (min-width:414px) {
.wrap-extend > ul > li{
    height:85px;
}
.extend-img{
    width:22%;
    height:70px;
    padding-top:15px
}
.extend-img > div{
    width:50px;
    height:50px;
    background-size:40px;
}
.extend-word{
    width:78%;
}
.extend-word > div{
    width:95%;
    height:60px;
    line-height:60px;
    font-size:18px;
}
.extend-word > div:nth-child(2){
    color:#d8d8d8;
    font-size:14px;
    height:25px;
    line-height:0px;
}
}
@media (max-width:413px) {
.wrap-extend > ul > li{
    height:75px;
}
.extend-img{
    width:22%;
    height:55px;
    padding-top:15px
}
.extend-img > div{
    width:40px;
    height:40px;
    background-size:30px;
}
.extend-word{
    width:78%;
}
.extend-word > div{
    width:95%;
    height:50px;
    line-height:50px;
    font-size:16px;
}
.extend-word > div:nth-child(2){
    color:#d8d8d8;
    font-size:12px;
    height:25px;
    line-height:5px;
}
}
html{
    background-color:#f8f8f8;
}
body{
    background-color:#f8f8f8;
}
.wrap-extend{
    width:90%;
    height:auto;
    background-color:#FFF;
    margin:auto;
    margin-top:20px;
    outline:#eee 1px solid;
    
    margin-bottom:30px;
}
.wrap-extend > ul{
    list-style:none;
}
.wrap-extend > ul > li{
    border-bottom:#ccc 1px solid;
}
.extend-img{
    float:left;
}
.CMCC{
    background-image:url(${ctx}/img/ydLOGO.png);
}
.CUCC{
    background-image:url(${ctx}/img/ltLOGO.png);
}
.CTCC{
    background-image:url(${ctx}/img/dxLOGO.png);
}
.extend-img > div{
    border-radius:5px;
    border:#CCC 1px solid;
    margin:auto;
    background-position:5px;
    background-repeat:no-repeat
}
.extend-word{
    float:right;
}
.extend-word > div{
    width:95%;
    
}
.extend-word > div:nth-child(1) > p:nth-child(1){
    float:left;
    font-size: 14px;
}
.extend-word > div:nth-child(1) > p:nth-child(2){
    float:right;
    color:#000;
    font-weight:bold;
    color:#fd6138;
    padding-top:10px;
}
.extend-word > div:nth-child(2){
    color:#d8d8d8;
}
.extend-word > div:nth-child(2) > p:nth-child(1){
    float:left
}
.extend-word > div:nth-child(2) > p:nth-child(2){
    float:right
}
.wrap-extend > ul > li:last-child{
    border:none;
    
}
</style>
</head>

<body>
<c:if test="${empty agentBrokerageDtlList.rows}">
	<div class="wrap">
	    <div class="hold-on">
	        <img src="${ctx}/img/none.png">
	        <p>亲，您暂时没有收益记录</p>
	    </div>
	</div>
</c:if>
<c:if test="${not empty agentBrokerageDtlList.rows}">
<div class="wrap-extend" id="wrapper">
    <ul>
        <c:forEach items="${agentBrokerageDtlList.rows}" var="agentBrokerageDtl" >
	        <li>
	            <div class="extend-img">
	                <div class="${agentBrokerageDtl.product.operSimpleName}"></div> 
	            </div>
	            <div class="extend-word">
	                <div>
	                    <p>${agentBrokerageDtl.product.productName}</p>
	                    <p>${agentBrokerageDtl.DCharge}</p>
	                </div>
	                <div>
	                    <p><fmt:formatDate value="${agentBrokerageDtl.crtDate}" pattern="yyyy-MM-dd HH:mm:ss"/></p>
	                    
	                </div>
	             </div>
	        </li>
        </c:forEach> 
    </ul>
  
    <div class="wrap fn-hide"  id="pullUp">
	      <div class="loader">
	        <div id="loaderBall" class="loader-inner ball-beat">
	          <div></div>
	          <div></div>
	          <div></div>
	        </div>
	        <div id="loadingWord" class="word">正在加载...</div>
	        <div id="releaseWord" class="word">松开加载更多数据</div>
	     </div> 
    </div> 

</div>
</c:if>
</body>
</html>
